<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="css/remove.css">
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<header>
		<div class="header-top">
			<div class="header-top-con">
				<ul>
					<li><a href="order.html">
						订单追踪
						<i class="icon-headerf icon-new-first"></i>
					</a></li>
					<li><a href="">
						帮助中心
						<i class="icon-headers icon-new-second"></i>
					</a></li>
					<li><a href="">
						在线客服
						<i class="icon-headert icon-new-third"></i>
					</a></li>
					<li><a class="user" href="sign.html">
						登录
						<i id="login" class="icon-headerl icon-new-last"></i>
					</a></li>
					<div id="hover">
						<p class="qie">切换账户</p>
						<p class="me">个人信息</p>
						<p class="tui">退出</p>
					</div>
				</ul>
			</div>
		</div>
		<div class="header-con">
			<div class="header-con-left">
				<h1>
					<img src="img/first/logo-new.png" alt="">
				</h1>
				<ul>
					<li><a href="list.html">男子</a></li>
					<li><a href="">女子</a></li>
					<li><a href="">儿童</a></li>
					<li><a href="">|</a></li>
					<li><a href="">运动</a></li>
					<li><a href="">品牌</a></li>
					<li><a href="">精选系列</a></li>
				</ul>
			</div>
			<ul class="header-con-right">
				<li class="header-seach">
					<i></i>
					<input type="" placeholder="冬季甄选">
				</li>
				<li class="car">
					<i class="icon-cart"></i>
					<span class="icon-car">0</span>
				</li>
			</ul>
		</div>
	</header>
	<div class="banner">
		<img src="img/first/kv-pc.jpg" alt="">
	</div>
	<div class="banner-item">
		<img src="img/first/feature-pc.jpg" alt="">
		<img src="img/first/feature-pc2.jpg" alt="">
	</div>
	<article>
		<ul>
			<li>
				<img src="img/first/zhanshi.png" alt="">
				<a href="">立即选购</a>
			</li>
			<li>
				<img src="img/first/maijiaxiu-1.png" alt="">
				<a href="">Superstar系列</a>
			</li>
			<li>
				<img src="img/first/2.png" alt="">
				<a href="">UItraBOOST系列</a>
			</li>
			<li>
				<img src="img/first/1.png" alt="">
				<a href="">STSANSMITH系列</a>
			</li>
		</ul>
	</article>
	<div class="artic">
		<img src="img/first/1920-720-kuang.jpg" alt="">
	</div>
	<div class="wrapper">
		<img src="img/first/feature-pc4.jpg" alt="">
		<img src="img/first/feature-pc6.gif" alt="">
	</div>
	<div class="article">
		<img src="img/first/1920-720(4).jpg" alt="">
	</div>
	<div class="min-wrapper">
		<ul>
			<li>
				<img src="img/first/zhan-pc1.jpg" alt="">
			</li>
			<li>
				<img src="img/first/zhan-pc_12.jpg" alt="">
			</li>
			<li>
				<img src="img/first/zhan-pc_13.jpg" alt="">
			</li>
			<li>
				<img src="img/first/zhan-pc_04.jpg" alt="">
			</li>
			<li>
				<img src="img/first/zhan-pc_14.jpg" alt="">
			</li>
			<li>
				<img src="img/first/zhan-pc_16.jpg" alt="">
			</li>
			<li>
				<img src="img/first/zhan-pc_07.jpg" alt="">
			</li>
			<li>
				<img src="img/first/zhan-pc_08.jpg" alt="">
			</li>
		</ul>
	</div>
	<div class="article-text">
		<div class="article-con">
			<h5>
				选购冬季甄选系列
			</h5>
			<p>
				立即选购
			</p>
		</div>
	</div>
	<div class="article-banner">
		<img src="img/first/feature-pc(1).jpg" alt="">
		<img src="img/first/feature-pc(41).jpg" alt="">
	</div>
	<div class="article-kv">
		<ul class="title">
			<li>
				<img src="img/first/kv-pc-yyqx.jpg" alt="">
			</li>
			<li>
				<img src="img/first/kv-pc(19).jpg" alt="">
			</li>
		</ul>
		<div class="littel">
			<img src="img/first/little-1.jpg" alt="" class="left">
			<img src="img/first/little-2.jpg" alt="" class="next">
		</div>
	</div>
	<div class="flex">
		<img src="img/first/feature-pc(23).gif" alt="">
		<img src="img/first/feature-pc(48).jpg" alt="">
		<img src="img/first/feature-pc(2).jpg" alt="">
		<img src="img/first/feature-pc(3).jpg" alt="">
	</div>
	<div class="pinjie">
		<img src="img/first/pc_01.jpg" alt="">
		<img src="img/first/zhan-pc_02.jpg" alt="">
		<img src="img/first/zhan-pc_03.jpg" alt="">
		<img src="img/first/pc_04.jpg" alt="">
		<img src="img/first/pc_05.jpg" alt="">
		<img src="img/first/zhan-pc_06.jpg" alt="">
		<img src="img/first/zhan-pc_07(1).jpg" alt="">
		<img src="img/first/pc_08.jpg" alt="">
	</div>
	<div class="product">
		<h3>本周热卖</h3>
		<div class="swiper-prev"></div>
		<div class="swiper-next"></div>
		<div id="square">
		</div>
		<span id="template"></span>
		<ul>
			<li>
				<ul>
					<li>
						<span>个性印制</span>
						<img src="img/first/li1.jpg" alt="">
						<p>Supersart经典运动鞋</p>
						<p>￥799</p>
					</li>
					<li>
						<span>5折</span>
						<img src="img/first/li2.jpg" alt="">
						<p>Supersart经典运动鞋</p>
						<p>￥799</p>
					</li>
					<li>
						<span>5折</span>
						<img src="img/first/li3.jpg" alt="">
						<p>Supersart经典运动鞋</p>
						<p>￥799</p>
					</li>
					<li>
						<span>新品</span>
						<img src="img/first/li4.jpg" alt="">
						<p>Supersart经典运动鞋</p>
						<p>￥799</p>
					</li>
				</ul>
			</li>
			<li>
				<ul>
					<li>
						<span>个性印制</span>
						<img src="img/list/list-1.jpg" alt="">
						<p>Supersart经典运动鞋</p>
						<p>￥799</p>
					</li>
					<li>
						<span>5折</span>
						<img src="img/list/list-2.jpg" alt="">
						<p>Supersart经典运动鞋</p>
						<p>￥799</p>
					</li>
					<li>
						<span>5折</span>
						<img src="img/list/list-3.jpg" alt="">
						<p>Supersart经典运动鞋</p>
						<p>￥799</p>
					</li>
					<li>
						<span>新品</span>
						<img src="img/list/list-4.jpg" alt="">
						<p>Supersart经典运动鞋</p>
						<p>￥799</p>
					</li>
				</ul>
			</li>
			<li>
				<ul>
					<li>
						<span>个性印制</span>
						<img src="img/list/list-5.jpg" alt="">
						<p>Supersart经典运动鞋</p>
						<p>￥799</p>
					</li>
					<li>
						<span>5折</span>
						<img src="img/list/list-6.jpg" alt="">
						<p>Supersart经典运动鞋</p>
						<p>￥799</p>
					</li>
					<li>
						<span>5折</span>
						<img src="img/list/list-7.jpg" alt="">
						<p>Supersart经典运动鞋</p>
						<p>￥799</p>
					</li>
					<li>
						<span>新品</span>
						<img src="img/list/list-8.jpg" alt="">
						<p>Supersart经典运动鞋</p>
						<p>￥799</p>
					</li>
				</ul>
			</li>
			<li>
				<ul>
					<li>
						<span>个性印制</span>
						<img src="img/list/list-9.jpg" alt="">
						<p>Supersart经典运动鞋</p>
						<p>￥799</p>
					</li>
					<li>
						<span>5折</span>
						<img src="img/list/list-10.jpg" alt="">
						<p>Supersart经典运动鞋</p>
						<p>￥799</p>
					</li>
					<li>
						<span>5折</span>
						<img src="img/list/list-11.jpg" alt="">
						<p>Supersart经典运动鞋</p>
						<p>￥799</p>
					</li>
					<li>
						<span>新品</span>
						<img src="img/list/list-12.jpg" alt="">
						<p>Supersart经典运动鞋</p>
						<p>￥799</p>
					</li>
				</ul>
			</li>
		</ul>
	</div>

	<div class="footer-top">
		<div class="footer-top-con">
			<ul>
				<li>联系我们</li>
				<li>
					<i class="icon icon-ke"></i>
					在线客服
				</li>
				<li>
					<i class="icon icon-phone"></i>
					400-999-5999
				</li>
				<li>
					<i class="icon icon-email"></i>
					server@adidas.com
				</li>
				<li>
					<i class="icon icon-time"></i>
					9:00-22:00
				</li>
			</ul>
			<div class="right">
				<i class="icon icon-zhui"></i>
				订单追踪
			</div>
		</div>
	</div>
	<div class="footer-con">
		<ul>
			<ul>
				<li class="foot-procuct">产品</li>
				<li>鞋类</li>
				<li>服装</li>
				<li>配件</li>
				<li>最新上市</li>
				<li>新品发售日历</li>
				<li>限量发售</li>
			</ul>
			<ul>
				<li class="foot-procuct">运动</li>
				<li>跑步</li>
				<li>训练</li>
				<li>足球</li>
				<li>篮球</li>
				<li>户外</li>
			</ul>
			<ul>
				<li class="foot-procuct">帮助中心</li>
				<li>关于员工</li>
				<li>尺码表</li>
				<li>adiCLUB会员</li>
				<li>门店查询</li>
				<li>关于我们</li>
				<li>企业社会责任</li>
				<li>ADIDAS APP</li>
			</ul>
			<ul>
				<li class="foot-procuct">网站政策</li>
				<li>使用条款</li>
				<li>隐私声明</li>
				<li>物流配送规则</li>
				<li>退换货规则</li>
				<li>adiCLUB会员规则</li>
				<li>下单指南</li>
				<li>印制服务条款</li>
			</ul>
		</ul>
		<div class="right">
			<p class="foot-procuct">关注我们</p>
			<span class="icon-span span1"></span>
			<span class="icon-span span2"></span>
		</div>
		<div class="right">
			<p class="foot-procuct">职业发展</p>
			<span class="icon-span span3"></span>
		</div>
	</div>
	<ul class="footer-method">
		<li>我们接受下列付款方式：</li>
		<li class="icon icon-zhi"></li>
		<li class="icon icon-wei"></li>
		<li class="icon icon-yin"></li>
	</ul>
	<div class="text">
		<p>企业团购热线及邮箱：&nbsp;&nbsp;&nbsp;团购热线：021-2525 6861</p>
		<p>团购邮箱：adidas.com  (仅限采购金额10万以上)</p>
	</div>
	<div class="footer-bot">
		<div class="footer-bot-con">
			<p class="p1">
				<span class="icon icon-china"></span>
				<span>中国</span>
				<span>隐私声明</span>
				<span>使用条款</span>
				<span>网站地图</span>
				<span>&copy;阿迪达斯体育(中国)有限公司保留所有权利</span>
			</p>
			<p class="p2">
				<span>苏ICP备14048805号-1</span><span class="icon icon-hui"></span><span>&copy;2019adidas江苏工商</span><span class="icon icon-hui"></span><span>苏公安网安备32059002001401号</span>
			</p>
		</div>
	</div>
</body>
</html>
<script src="js/jquery.min.js"></script>
<script src="js/remove.js"></script>
<script>
	let ul = $(".title");
	let imgList = $(".title li")
	let n=0;
	$(function(){
		t = setInterval("$('.next').click()", 2000);
	})


	$(function(){
		t = setInterval("$('.swiper-next').click()", 2000);
	})


	imgList.each(function(){
			$("<li></li>").clone().appendTo($("#square"));
	})
	function change(){
		ul.animate({
				marginLeft:-1920*n,
			},)
	}
	$(".next").click(function(){
		if (n !== imgList.length - 1) {
			n++;
			change();
		}
		else{
			n = 0;
			change();
		}
	})
	$(".left").click(function(){
		if (n !== 0) {
			n--;
			change();
		}
		else{
			n = imgList.length - 1;
			change();
		}
	})


	let imgList1 = $(".product>ul>li");
	let ul1 = $(".product>ul");
	let n1 = 0;
	imgList1.each(function(){
		$("#template").clone().appendTo($("#square")).attr("id","");
	})
	let dotList1 = $("#square span");
	dotList1.eq(0).addClass("style");
	function change1(){
		ul1.animate({
				marginLeft:-(n1 * 1252),
			})
		dotList1.removeClass().eq(n1).addClass("style");
	}
	$(".swiper-next").click(function(){
		if (n1 !== imgList1.length - 1) {
			n1++;
			change1();
		}
		else{
			n1 = 0;
			let lastImg = imgList1.eq(0).clone().appendTo(ul1);
			ul1.animate({
				marginLeft:imgList1.length * (-1252),
			},function(){
				lastImg.remove();
				ul1.css({marginLeft:0})
			})
			dotList1.removeClass().eq(n1).addClass("style");
		}
	})
	$(".swiper-prev").click(function(){
		if (n1 !== 0) {
			n1--;
			change1();
		}
		else{
			n1 = imgList1.length - 1;
			let firstImg = imgList1.eq(imgList.length1 - 1).clone().prependTo(ul1);
			ul1.css({marginLeft:-1252}).animate({
				marginLeft:0,
			},function(){
				firstImg.remove();
				ul1.css({marginLeft:(imgList1.length - 1)* -1252})
			})
			dotList1.removeClass().eq(n1).addClass("style");
		}
	})
	dotList1.click(function(){
		n1 = $(this).index();
		change1();
	})
</script>